<template>
  <!-- 智能锁控-锁具信息弹窗 -->
  <div class="lock-information bigTableStyle">
    <div class="lock-information-filter">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="1.4rem">
        <el-row>
          <el-col :span="9">
            <el-row>
              <el-form-item label="设备名称：">
                <el-input
                  v-model="formData.deviceName"
                  placeholder="请输入设备名称"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="9">
            <el-row>
              <el-form-item label="区域名称：">
                <el-input
                  v-model="formData.regionName"
                  placeholder="请输入区域名称"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <div class="btn-ground centerbox">
              <el-button
                class="table-query"
                icon="iconfont iconsousuo"
                type="primary"
                @click="queryForm"
              >查询</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="lock-information-table">
      <el-table
      border
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        height="100%"
      >
        <el-table-column prop="myIndex" label="序号" width="60"></el-table-column>
        <el-table-column prop="deviceNum" label="设备ID"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称" width="160"></el-table-column>
        <el-table-column prop="deviceCode" label="设备编码" width="160"></el-table-column>
        <el-table-column prop="areaId" label="设备所属区域ID" width="160"></el-table-column>
        <el-table-column prop="areaName" label="设备所属区域" width="160"></el-table-column>
      </el-table>
    </div>
    <div class="lock-information-page centerbox elPaginationStyle">
      <el-pagination
      @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { LocksAPIModule } from "@/store/modules/locks";
interface pagesType {
  pageSize: number;
  page: number;
  totalSize: number;
}
@Component
export default class LockInformation extends Vue {
  formData = {
    deviceName: "", //设备名称
    regionName: "", //区域名称
  };
  rules = {
    name: [],
    password: [],
    idCard: [],
    devicename: [],
  };
  tableData: Array<object> = [
    // {
    //   index: 1,
    //   deviceID: "DF58646525",
    //   deviceName: "关口电柜表柜前门",
    //   deviceCode: "841531FFD626",
    //   areaID: "061213",
    //   area: "主控制室",
    // },
  ];

  //   分页
  pages: pagesType = {
    pageSize: 10,
    page: 1,
    totalSize: 0,
  };

  get stationId() {
    return LocksAPIModule.stationId;
  }

  mounted() {
    this.fetch();
  }

  fetch() {
    var params = {
      page: this.pages.page,
      size: this.pages.pageSize,
      stationId: this.stationId,
      areaName: this.formData.regionName || undefined,
      deviceName: this.formData.deviceName || undefined,
    };
    (this as any).$services
      .getLocksList({ data: params })
      .then((result: any) => {
        if (result.data) {
          // console.log(result);
          let page = this.pages.page;
      let size = this.pages.pageSize;
          this.tableData = result.data.records.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
          this.pages = {
            pageSize: result.data.size,
            page: result.data.current,
            totalSize: result.data.total,
          };
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //   查询
  queryForm() {
    this.pages.page = 1;
    this.fetch();
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.fetch();
  }
  // 翻页
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.fetch();
  }
}
</script>

<style lang="scss" scoped>
.lock-information {
  width: 100%;
  height: 5rem;
  &-filter {
    width: 100%;
    height: 0.5rem;
  }
  &-table {
    width: 100%;
    height: calc(100% - 0.8rem);
  }
  &-page{
    width: 100%;
    height: 0.3rem;
  }
}
</style>